<template>
  <div>
    <el-dialog
      :title="`${type == 1 ? '充电/停车' : '停车'}价格设置`"
      :visible.sync="show"
      width="70%"
      append-to-body
    >
      <div>
        <el-table v-loading="loading" :data="dataList" border stripe>
          <el-table-column label="#" type="index" width="80" align="center">
            <template slot-scope="scope">
              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="类型"
            align="center"
            prop="vehicleTypeName"
            min-width="120"
          />
          <el-table-column label="月卡价格(元)" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input
                v-model.number="scope.row.monthAmount"
                type="number"
                placeholder="请输入月卡价格"
                :max="99999"
                :min="0"
              />
            </template>
          </el-table-column>
          <el-table-column label="季卡价格(元)" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input
                v-model.number="scope.row.quarterAmount"
                type="number"
                placeholder="请输入季卡价格"
                :max="99999"
                :min="0"
              />
            </template>
          </el-table-column>
          <el-table-column label="年卡价格(元)" align="center" min-width="120">
            <template slot-scope="scope">
              <el-input
                v-model.number="scope.row.yearAmount"
                type="number"
                placeholder="请输入年卡价格"
                :max="99999"
                :min="0"
              />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary " @click="handleUpdate"> 保 存 </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listVipSetting, updateVipSetting } from "@/api/weiriya/vipSetting";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    // 停车点位ID
    id: {
      type: String,
      default: "",
    },
    // 类型
    type: {
      type: [String, Number],
      default: 1,
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set() {
        this.$emit("input", false);
      },
    },
  },
  watch: {
    value(val) {
      if (val) {
        this.queryParams.areaId = this.id;
        this.queryParams.settingType = this.type;
        this.getList();
      }
    },
  },
  data() {
    return {
      loading: false, // 加载状态
      total: 0, // 总条数
      dataList: [], // 数据列表
      queryParams: {
        // 查询参数
        pageNum: 1,
        pageSize: 100,
        areaId: null,
        settingType: null, // 1 充电/停车 2 停车
      },
    };
  },
  methods: {
    // 获取数据
    getList() {
      this.loading = true;
      listVipSetting(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 修改价格
    handleUpdate() {
      updateVipSetting(this.dataList).then((res) => {
        this.$message.success("修改成功");
        this.getList();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  border: transparent;
  text-align: center;
  background-color: transparent;
  &:focus {
    border: 1px solid #409eff;
  }
}
.dialog-footer {
  width: 100%;
  text-align: center;
}
</style>
